<template>
    <div>
      <div class="top_image">
        <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/case/banner.jpeg" style="width: 100%;height: 100%;display: block">
      </div>
      <div class="case_product_content">
          <span class="case_product_text">他们都在用芸助手行业解决方案</span>
        <div class="case_item_content">
           <div class="case_item">
              <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/logo1.png" class="case_logo">
              <span class="case_name">水达人</span>
             <div class="case_text_content">
               <span class="case_text">水达人系行业领先一站式智慧订水及生活配送平台，通过整合传统水站、社区门店等线下资源，结合移动互联网科技，提供完善的桶装、瓶装水及其他生活品配送新零售解决方案，实现水﹣生活配送商业闭环，满足人们优质健康生活之需。</span>
             </div>

           </div>
          <div class="case_item">
            <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/logo2.png" class="case_logo">
            <span class="case_name">珍农在线</span>
            <div class="case_text_content">
              <span class="case_text">珍农在线系优选民生生鲜订购平台，致力于安全优质民生生鲜产品的开发及生鲜产品电子商务平台的建设运营，平台有大量新鲜农副产品在售,用户可以随时随地进行搜索和浏览，购买自己想要的食材。</span>
            </div>

          </div>
          <div class="case_item">
            <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/case/logo.svg" style="width: 35px" class="case_logo">
            <span class="case_name">芸点单</span>
            <div class="case_text_content">
              <span class="case_text">芸点单系统集成了外卖、点餐、订座等众多功能。消费者只需关注店家的帐号，即可浏商品与店家的信息，根据提示，进行点单，完成订餐后。店家可以通过电脑后台、短信或无线打印机多种方式即时查看订单，并提供相应的服务。</span>
            </div>

          </div>
          <div class="case_item">
            <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/case/yun_car.png" class="case_logo">
            <span class="case_name">巨石山停车场</span>
            <div class="case_text_content">
              <span class="case_text">智能停车场收费管理系统是现代化停车场车辆收费及设备自动化管理的统称，该系统是将机械、电子计算机和自控设备以及线上扫码支付结合起来，通过电脑管理下可实现车辆图像对比，自动收费、自动存储数据等功能</span>
            </div>

          </div>

        </div>
      </div>
      <div class="case_cooperation_content">
<!--        <span  class="case_product_text">芸助手合作客户</span>-->
<!--        <div class="select_cooperation">-->
<!--          <el-select v-model="selectvalue" placeholder="-&#45;&#45;请选择-&#45;&#45;" clearable style="width: 200px; font-size: 14px">-->
<!--            <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->


<!--        </div>-->
<!--        <div class="cooperation_list_content">-->
<!--          <div class="cooperation_list_text">-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->

<!--          </div>-->
<!--          <div class="cooperation_list_text">-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->
<!--            <span class="cooperation_name">厦门水达人网络科技有限公司</span>-->

<!--          </div>-->
<!--        </div>-->
        <div class="authentication_content">
          <div class="authentication_item">
            <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/authentication1.png" class="authentication_img">
            <span class="authentication_text">高新认证</span>
          </div>
          <div class="authentication_item">
            <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/authentication2.png" class="authentication_img">
            <span class="authentication_text">专利认证</span>
          </div>
          <div class="authentication_item">
            <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/authentication3.png" class="authentication_img">
            <span class="authentication_text">软著认证</span>
          </div>
          <div class="authentication_item">
            <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/authentication4.png" class="authentication_img">
            <span class="authentication_text">质量认证</span>
          </div>
          <div class="authentication_item">
            <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/authentication5.png" class="authentication_img">
            <span class="authentication_text">产品认证</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'case',
    data(){
      return{
        selectvalue:'',
        options: [{
          value: '选项1',
          label: '芸订水'
        }, {
          value: '选项2',
          label: '芸商店'
        }, {
          value: '选项3',
          label: '芸点单'
        }, {
          value: '选项4',
          label: '芸车场'
        }],
      }
    }
  }
</script>

<style scoped>
  select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
  }
  /deep/.el-select .el-input.is-focus .el-input--medium .el-input__inner{
    border-color: #b4bccc;
    font-size: 16px;
  }
  @media screen and (min-width: 0px) and (max-width: 320px) {
    .case_product_content{
      background-color: #ededed;
      width: 100%;
      display: flex;
     padding: 30px 20px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .case_product_text{
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .case_item_content{
      display: flex;
      justify-content: center;
      margin-top: 20px;
      width: 100%;
      flex-wrap: wrap;
      align-items: center;
    }
    .case_item{
      border-radius: 5px;
      display: flex;
      margin-bottom: 10px;
      flex-direction: column;
      background-color: white;
      width: 100%;
      height: 100%;
      padding-bottom: 20px;
      justify-content: center;
      align-items: center;
    }
    .case_logo{
      height: 65px;
      /*width: 140px;*/
    }
    .case_name{
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      /*line-height: 34px;*/
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .case_text{
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      text-align: justify;
    }
    .case_text_content{
      /*width: 120px;*/
      margin-left: 20px;
      margin-right: 20px;
      display: flex;
      margin-top: 5px;
      flex-wrap: wrap;
    }
    .case_cooperation_content{
      background-color: white;
     padding: 30px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .select_cooperation{
      width: 100%;
      height: 25px;
      /*background-color: #e3f3fb;*/
      display: flex;
      padding: 15px;
      margin-top: 30px;
      align-items: center;
      justify-content: center;
    }
    .select_cooperation_text{
      font-size: 14px;
    }
    .cooperation_list_content{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .cooperation_list_text{
      width: 100%;
      text-align: center;
    }
    .cooperation_name{
      font-size: 15px;
      color: #747474;
      line-height: 30px;
      display: block;
    }
    .authentication_text{
      font-size: 12px;
      color: #747474;
    }
    .authentication_content{
      display: flex;
      margin-top: 30px;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
    }
    .authentication_item{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

    }
    .authentication_img{
      height:40px;
      width: 50px ;
    }
  }
  @media screen and (min-width: 321px) and (max-width: 750px){
    .case_product_content{
      background-color: #ededed;
      width: 100%;
      display: flex;
      padding: 30px 20px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .case_product_text{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .case_item_content{
      display: flex;
      justify-content: center;
      margin-top: 20px;
      width: 100%;
      flex-wrap: wrap;
      align-items: center;
    }
    .case_item{
      border-radius: 5px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 10px;
      flex-direction: column;
      background-color: white;
      width: 100%;
      height: 100%;
      padding-bottom: 20px;
    }
    .case_logo{
      height: 65px;
      /*width: 140px;*/
    }
    .case_name{
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      /*line-height: 34px;*/
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .case_text{
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      text-align: justify;
    }
    .case_text_content{
      /*width: 120px;*/
      margin-left: 20px;
      margin-right: 20px;
      display: flex;
      margin-top: 5px;
      flex-wrap: wrap;
    }
    .case_cooperation_content{
      background-color: white;
     padding: 30px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .select_cooperation{
      width: 100%;
      height: 25px;
      /*background-color: #e3f3fb;*/
      display: flex;
      padding: 15px;
      margin-top: 30px;
      align-items: center;
      justify-content: center;
    }
    .select_cooperation_text{
      font-size: 14px;
    }
    .cooperation_list_content{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
    }
    .cooperation_name{
      font-size: 15px;
      color: #747474;
      line-height: 30px;
      display: block;
    }
    .authentication_text{
      font-size: 12px;
      color: #747474;
    }
    .authentication_content{
      display: flex;
      margin-top: 30px;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
    }
    .authentication_item{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .authentication_img{
      height: 40px;
      width: 60px ;
    }
  }
  @media screen and (min-width: 751px) and (max-width: 779px){
    .case_product_content{
      background-color: #ededed;
      width: 100%;
      display: flex;
      padding-top: 30px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 30px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .case_product_text{
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .case_item_content{
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      width: 100%;
      flex-wrap: wrap;
      align-items: center;
    }
    .case_item{
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      background-color: white;
      width: 170px;
      height: 300px;
      padding-bottom: 20px;
      justify-content: flex-start;
      align-items: center;
    }
    .case_logo{
      height: 65px;
      /*width: 140px;*/
    }
    .case_name{
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      /*line-height: 34px;*/
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .case_text{
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      text-align: justify;
    }
    .case_text_content{
      /*width: 120px;*/
      display: flex;
      margin-top: 5px;
      flex-wrap: wrap;
      margin-left: 20px;
      margin-right: 20px;
    }
    .case_cooperation_content{
      background-color: white;
      padding-top: 30px;
      padding-bottom: 30px;
      padding-right: 20px;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .select_cooperation{
      width: 500px;
      height: 25px;
      /*background-color: #e3f3fb;*/
      display: flex;
      padding: 15px 0;
      margin-top: 30px;
      align-items: center;
    }
    .select_cooperation_text{
      font-size: 14px;
    }
    .cooperation_list_content{
      width: 500px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
    }
    .cooperation_name{
      font-size: 15px;
      color: #747474;
      line-height: 30px;
      display: block;
    }
    .authentication_content{
      display: flex;
      margin-top: 30px;
      margin-right:20px;
      margin-left: 20px;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      width: 100%; }
    .authentication_item{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .authentication_img{
      height: 80px;
      width: 100px ;
    }

  }
  @media screen and (min-width: 780px) and (max-width: 1199px){
    .case_product_content{
      background-color: #ededed;
      width: 100%;
      display: flex;
      padding-top: 30px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 30px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .case_product_text{
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .case_item_content{
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      width: 100%;
      flex-wrap: wrap;
      align-items: center;
    }
    .case_item{
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      background-color: white;
      width: 200px;
      height: 300px;
      padding-bottom: 20px;
      /*justify-content: center;*/
      align-items: center;
    }
    .case_logo{
      height: 65px;
      /*width: 140px;*/
      margin-top: 10px;
    }
    .case_name{
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      /*line-height: 34px;*/
      margin-top: 10px;
    }
    .case_text{
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      margin-top: 20px;
      text-align: justify;
    }
    .case_text_content{
      /*width: 120px;*/
      display: flex;
      margin-top: 5px;
      flex-wrap: wrap;
      margin-left: 20px;
      margin-right: 20px;
    }
    .case_cooperation_content{
      background-color: white;
      padding-top: 30px;
      padding-bottom: 30px;
      padding-right: 20px;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .select_cooperation{
      width: 500px;
      height: 25px;
      /*background-color: #e3f3fb;*/
      display: flex;
      padding: 15px 0;
      margin-top: 30px;
      align-items: center;
    }
    .select_cooperation_text{
      font-size: 14px;
    }
    .cooperation_list_content{
      width: 500px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
    }
    .cooperation_name{
      font-size: 15px;
      color: #747474;
      line-height: 30px;
      display: block;
    }
    .authentication_content{
      display: flex;
      margin-top: 30px;
      margin-right:20px;
      margin-left: 20px;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      width: 100%; }
    .authentication_item{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .authentication_img{
      height: 80px;
      width: 100px ;
    }

  }
  @media (min-width: 1200px){
    .case_product_content{
      background-color: #ededed;
      width: 100%;
      display: flex;
      padding-top: 30px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 30px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .case_product_text{
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .case_item_content{
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      width: 1200px;
      flex-wrap: wrap;
      align-items: center;
    }
    .case_item{
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      background-color: white;
      width: 260px;
      height: 300px;
      padding-bottom: 20px;
      margin-top: 20px;
      margin-right: 20px;
      margin-left: 20px;
      /*justify-content: center;*/
      align-items: center;
    }
    .case_logo{
      height: 70px;
      /*width: 140px;*/
      margin-top: 10px;
    }
    .case_name{
      font-size: 17px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      /*line-height: 34px;*/
      margin-top: 10px;
    }
    .case_text{
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      margin-top: 20px;
      text-align: justify;
    }
    .case_text_content{
      /*width: 120px;*/
      display: flex;
      margin-top: 5px;
      flex-wrap: wrap;
      margin-left: 20px;
      margin-right: 20px;
    }
    .case_cooperation_content{
      background-color: white;
      padding: 30px 20px ;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .select_cooperation{
      width: 520px;
      height: 25px;
      /*background-color: #e3f3fb;*/
      display: flex;
      padding: 15px;
      margin-top: 30px;
      align-items: center;
      /*justify-content: center;*/
      position: relative;
    }
    .select_cooperation_text{
      font-size: 14px;
    }
    .cooperation_list_content{
      width: 600px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 30px;
    }
    .cooperation_name{
      font-size: 15px;
      color: #747474;
      line-height: 2;
      display: block;
    }
    .authentication_content{
      display: flex;
      margin-top: 30px;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      width: 1200px;
    }
    .authentication_item{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin: 0 20px;
    }
    .authentication_img{
      height: 80px;
      width: 100px ;
    }
  }
</style>
